<template>

  <div class="vacation">

    <section class="view">

      <!-- 年假 -->
      <div class="year-list">
         
        <div class="img">
          <img src="../../../static/imgs/year.svg">
        </div>
        <div class="year-detail">
          <h2>
            <span>年假</span><a @click.stop='showHelp("year")'>查看年假规则说明</a>
          </h2>
          <ul>
            <li v-for='(k,i) in yearData'  v-if='k.end_dt' :key='i'>
              <p><span style="font-size:0.32rem;font-weight: 600;">{{k.years}}{{k.leave_type}}</span> <span>有效期{{k.end_dt}}</span></p>
              <p><span>共{{k.sum_days}}天</span> <span>已休{{k.sum_days - k.rest_days}}天</span><span>剩余{{k.rest_days}}天</span></p>
              <mt-range
               v-model='yearRange[i]' 
               :barHeight='10' disabled
               :key='i'>
              </mt-range>
            </li>
          </ul>
        </div>
      </div>
      



      <!-- 病假 -->

      <div class="sick-list"  v-if='sickData.visible'>
         <div class="img">
          <img src="../../../static/imgs/sick.svg">
        </div>
        <div class="sick-detail">
          <h2>
            <span>病假</span><a @click.stop='showHelp("sick")'>查看病假规则说明</a>
          </h2>
          <ul>
            <li v-for='(k,i) in sickData' :key='i'>
              <p><span>{{k.years}}{{k.leave_type}}</span> <span v-if='k.leave_type ==="全薪病假" && k.end_dt'>有效期{{k.end_dt}}</span> <span style='float:right;color:#26a2ff;' v-if='k.leave_type ==="有薪病假"'>剩余{{k.rest_days}}天</span></p>
              <p v-if='k.leave_type ==="全薪病假"'><span >共{{k.sum_days}}天</span> <span>已休{{k.sum_days - k.rest_days}}天</span><span>剩余{{k.rest_days}}天</span></p>
              <mt-range
               v-if='k.leave_type ==="全薪病假"'
               v-model='yearRange[i]' 
               :barHeight='10' disabled
               :key='i'>
              </mt-range>
            </li>
          </ul>
        </div>
        
        
      </div>  
  
    </section>

   


  <div class="nav-area">
       <div @click="alterLeave('leave')" :class="{selected:selectedMe}">我的休假</div>
       <div @click="alterLeave('dept')" :class="{selected:!selectedMe}">本部门休假情况</div>
  </div>


    <!-- 请假详情 -->
   <section class="detail" v-if="selectedMe">
      <ul>

        <li v-for='i in startDataList' @click="targetToRecord(i)">
  
          <h3 class="detail-title" style="line-height: 0.36rem;">
              <span>{{i.leave_name}}</span><span style="margin:auto 0.06rem;">共{{i.leave_day}}天</span>
             <p>{{i.start_time}} {{i.Leave_st_section === '1' ? '上午' : '下午'}} - {{i.end_time}} {{i.Leave_end_section === '1' ? '上午' : '下午'}}</p>
              <span v-if="i.auditStatus === '已备案'" style="margin-top: 0.04rem;float:right;background-color:#58CF28;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.36rem;line-height: 0.36rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">已通过</span><span v-if="i.auditStatus === '审批中'" style="margin-top: 0.04rem;float:right;background-color:#258DE4;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.36rem;line-height: 0.36rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">待审批</span><span v-if="i.auditStatus === '已拒绝'" style="margin-top: 0.04rem;float:right;background-color:#D12C23;color:#fff;display:inline-block;border-radius:0.1rem;height: 0.36rem;line-height: 0.36rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">已拒绝</span>
  
           
  
          </h3>
  
          <p class="detail-content">
              {{i.leave_reason}}
          </p>
  
        </li>
  
      </ul>
      <div class="nav-loadMore" :class="{'leaveMoreBtn':isShowLeaveBtn}">
            <div v-if="!myleaveEnd" @click="loadMore('leave')" class="selected"><span>更多</span></div>
            <div v-else >暂无更多数据</div>
      </div>
    </section>

    <!-- 本部门详情 -->
   <section class="detail" v-else>
        <!-- <div class="leader-info" v-for="(info,index) in dataDeptList"  :key="info.id">
            <div class="pic">
            <img :src="handleImg(info)" alt="" />
            </div>
            <div class="info-container">	
            <div class="basic-info">
                <span >{{info.name}}</span>
                <span class='position'>{{info.position}}</span>
                <span>{{info.leaveName}}</span>
                <span class="approStat" :class="hasClass(info.auditStatus)">{{info.auditStatus == '1' ? '审批中' : '已备案'}}</span>
            </div>
            <div class="posi-info">
                <span class="days">共{{info.leaveDay}}天</span>
                <span class="time">{{info.startTime}} {{info.leaveStSection === '1' ? '上午' : '下午'}} - {{info.endTime}} {{info.leaveEndSection === '1' ? '上午' : '下午'}}</span>
            </div>
            </div>
        </div> -->

        <ul>

          <li v-for='i in dataDeptList' >
    
            <h3 class="detail-title">
                <span style="min-width:1rem;display: inline-block;">{{i.name}}</span><span style="margin:auto 0.12rem;">{{i.leaveName}}</span>
              <p style="float:right;margin-right:0.2rem;">{{i.startTime}} {{i.leaveStSection === '1' ? '上午' : '下午'}} - {{i.endTime}} {{i.leaveEndSection === '1' ? '上午' : '下午'}}</p>
                <!-- <span v-if="i.auditStatus == '1'" style="margin-top: 0.04rem;float:right;background-color:#258DE4;color:#fff;display:inline-block;border-radius:0.1rem;height:0.28rem;line-height:0.28rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">审批中</span><span v-else style="margin-top: 0.04rem;float:right;background-color:#58CF28;color:#fff;display:inline-block;border-radius:0.1rem;height:0.28rem;line-height:0.28rem;font-size:0.24rem;width:0.96rem;text-align:center;margin-left:0.06rem;">已备案</span> -->
    
            
    
            </h3>
    
          </li>
    
        </ul>
        <div  v-bind:class="{'leaveMoreBtn':isShowLeaveBtn,'nav-loadMore':true}">
            <div v-if="!deptLeaveEnd" @click="loadMore('dept')" class="selected"><span>更多</span></div>
            <div v-else >暂无更多数据</div>
        </div>

    </section>




  
    <section class='apply' v-if="isShowLeaveBtn">
  
      <span @click="targetToLeave">我要休假</span>
  
    </section>
  
  </div>
</template>

<script>
import Vue from "vue"

import { Range,MessageBox  } from 'mint-ui';

Vue.component(Range.name, Range)

export default {

  data () {

    return {

      yearPopupVisible:false,
      active: 1,

      yearRange: [],

      sickRange:0,

      show: true,

      res: '',

      height: '',

      sickData:[],

      yearData:[],

      startDataList:[],
      yearLeaveList:[],
      sickLeaveList:[],
      sickDetail: {
        comment:''
      },

      yearDetail: {
        comment:''
      },

      selectedMe:true,
      dataDeptList:[],

      myLeavePageNum:1,
      deptLeavePageNum:1,
      pageSize:8,
    
      myleaveEnd:false,
      deptLeaveEnd:false,
      isShowLeaveBtn:true,
    };
  },


  mounted () {

    if (location.search) {
          var token = location.search.split("=")[1];
          localStorage.setItem('token',token);
          
          this.Axios.Post(this.URL.webLogin.url,{}).then(res=>{

              if (res.data.status === 1) {
                  this.isShowLeaveBtn = res.data.datas.applyLeavePlatform;
                  this.getStartSend();
                  this.sendAjax();
                  this.getVacationDetail()
              }
          })
    } else {
        this.getStartSend();
        this.sendAjax();
        this.getVacationDetail()      
    }
  },

  methods: {

    hasClass:function(val){
        if(val == '1') {
          return 'shenpi'
        }else {
          return 'beian'
        }        
    },

    handleImg : function(info){
          return this.Axios.baseURI + this.URL.tabGetEmployeeImg.url + '?emplid=' + info.emplid + '&sex=' +(info.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
    },

    loadMore:function(type){
        this.resetPageNum(type,'add');
        this.initListData(type);
    },

    alterLeave:function(type){
        if (type === 'leave') {
            this.selectedMe = true;
        } else {
            this.selectedMe = false;
        }
    },


    showHelp(a){
      const type = a=="year"?"年假":"病假"

      if(type==='年假') {
        MessageBox.alert(this.yearDetail.comment, type);
      }else {
        MessageBox.alert(this.sickDetail.comment, type);
      }
    },

    getVacationDetail () {
      this.Axios
        .Post(this.URL.getLeaveInstruction.url)
        .then((res) => {
          let datas = res.data.datas

          datas.forEach((ele,i) => {
            if(ele.code_name === "年假") {
              this.yearDetail.comment = ele.comment
            }

            if(ele.code_name === "病假") {
              this.sickDetail.comment = ele.comment
            }
          });
        })
    },
    sendAjax() {
      this.getDeptLeaveData();

      this.Axios.Post(this.URL.getValication.url).then(res => {
        var datas = res.data.datas;
        let yearData = [];
        let sickData = [];

          yearData.push({
            end_dt: datas.endDateAgo,
            sum_days: datas.sunDaysAgo,
            rest_days: datas.surplusAgo,
            leave_type: '年假',
            years: datas.QN
          });

          yearData.push({
            end_dt: datas.endDate,
            sum_days: datas.sunDays,
            rest_days: datas.surplus,
            leave_type: '年假',
            years: datas.JN
          });

        this.yearData = yearData;

          sickData.push({
            end_dt: datas.qxendDate,
            sum_days: datas.qxDays,
            rest_days: datas.surplusQX,
            leave_type: '全薪病假'
          });

          sickData.push({
            end_dt: '',
            sum_days: '',
            rest_days: datas.surplusYX,
            leave_type: '有薪病假'
          });

        let visible = parseFloat(datas.yxsumdays) > 0 ? true : false;

        sickData.visible = visible;

        this.sickData = sickData;

        this.yearData.forEach((element, i, arr) => {
          this.yearRange.push(100 - arr[i].rest_days / arr[i].sum_days * 100);
        });

        this.sickData.forEach((element, i, arr) => {
          if (arr[i].leave_type == '全薪病假') {
            this.sickRange = 100 - arr[i].rest_days / arr[i].sum_days * 100;
          }
        });
      });
    },

    getDeptLeaveData:function(){
  
      let params = {
        pageSize: this.pageSize,
        pageNum: this.deptLeavePageNum
      };
      this.Axios.Post(this.URL.tabQueryList.url, params).then(res => {
        res.data && (this.dataDeptList = this.dataDeptList.concat(res.data.datas || []));
        var total = res.data.total;
        if (total == 0 || total == this.dataDeptList.length) {
            this.deptLeaveEnd = true;
        }
      })
    
    },



    targetToLeave() {
      location.href =
        '/module/leave.html?token=' + sessionStorage.getItem('token');
    },
    targetToRecord: function(itemData) {
      console.log(itemData);
      localStorage.setItem('St_BsId', itemData.applyId || itemData.busi_id);
      // localStorage.setItem('detail_AI',itemData.applyId || itemData.busi_id);
      location.href = '/module/myStart.html';
    },

    getStartSend: function() {
      let params = {
        pageSize: this.pageSize,
        pageNum: this.myLeavePageNum
      };
      this.Axios.Post(this.URL.myleaveByrecord.url, params).then(res => {
        console.log(res);
        res.data && (this.startDataList = this.startDataList.concat(res.data.datas || []));
        var total = res.data.total;
        if (total == 0 || total == this.startDataList.length) {
            this.myleaveEnd = true;
        }
      });
    },


    resetPageNum:function(newVal,add){
        switch(newVal){
            case 'leave' : 
                  !add ? this.myLeavePageNum = 1 : this.myLeavePageNum++;
                  break;
            case 'dept' : 
                  !add ? this.deptLeavePageNum = 1 : this.deptLeavePageNum++;
                  break;                               
        }        
    },

    isLoadEnd:function(newVal){
        switch(newVal){
            case 'leave' : 
                  return this.myleaveEnd;
                  break;
            default : 
                  return this.deptLeaveEnd;
                  break;
                             
        }            
    },
    initListData:function(newVal){

        switch(newVal){
            case 'leave' : 
                  this.getStartSend();
                  break;
            default : 
                  this.getDeptLeaveData();
                  break;                                
        }
    }
  }
};
</script>

<style lang='less'>
.vacation {
  width: 100%;

  .view {
    background-color: #F3F3F3;
    width: 100%;

   
    .sick-list {
      margin-top: 6/50rem;
    }
    
    .year-list,.sick-list {
      padding: 15rem/50;
      overflow: hidden;
      width: 100%;
      background-color: #fff;
      

      .img {
        width: 60rem/50;
        height: 60rem/50;
        margin-right: 12rem/50;
        float: left;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .year-detail,.sick-detail {
        float: left;
        width: 75%;
        & > h2 {
          span {
            letter-spacing: 1.5rem/50;
            color: rgb(0, 0, 0);
            font-size: 16rem/50;
          }
          a {
            margin-left: 12/50rem;
            cursor: pointer;
            color: rgb(37, 141, 228);
            font-weight: normal;
            letter-spacing: 0.8rem/50;
            font-size: 13/50rem;
          }
        }

        & > ul {
          width: 100%;
          & > li {
            width: 100%;
            & > p:nth-of-type(1) {
              margin-top: 12/50rem;
              span {
                letter-spacing: 1rem/50;
              }
              span:nth-of-type(1) {
                font-size: 16/50rem;
                color: rgb(0, 0, 0);
              }

              span:nth-of-type(2) {
                color: #d22b27;
                margin-left: 6/50rem;
              }
            }

            & > p:nth-of-type(2) {
              margin-top: 6/50rem;
              overflow: hidden;
              span {
                float: left;
                letter-spacing: 1rem/50;
              }

              span:nth-of-type(2) {
                margin-left: 12rem/50;
              }

              span:last-of-type {
                float: right;
                color:#26a2ff;
              }
            }
          }
        }

        .mt-range {
          .mt-range-progress {
            border-radius: 30px 0 0 30px !important;

            background-color: #e4e4e4 !important;
          }

          .mt-range-runway {
            border-radius: 30px !important;

            right: -12px;

            border-top-color: #26a2ff;
          }

          .mt-range-thumb {
            width: 12px !important;

            height: 12px !important;

            top: 9px;

            margin-left: -2px;

            border: 1px solid #26a2ff;
          }
        }

        .mt-range-content {
          margin-right: 10px !important;
        }

        .mt-range--disabled {
          opacity: 1;
        }
      }
    }
  }


  .nav-area{
    display: flex;
    line-height:1rem;
    height:1rem;
    align-items: center;
    background-color:#fff;
    margin-top:0.2rem;
    >div{
      display: inline-flex;
      width:50%;
      justify-content:center;
    }
    >div:nth-child(2){
      border-left: 0.02rem solid #F3F3F3;
    }
    >div.selected{
        color:#26a2ff;
        span{
            letter-spacing: 0.06rem;
        }
    }
  }

  .nav-loadMore{
    display: flex;
    line-height:1rem;
    height:1rem;
    align-items: center;
    background-color:#fff;
    margin-top:0.2rem;
   
    >div{
      display: inline-flex;
      width:100%;
      justify-content:center;
    }
    >div.selected{
        color:#26a2ff;
        span{
            letter-spacing: 0.06rem;
        }
    }
  }

.leaveMoreBtn{
   margin-bottom:74/50rem;
}

.leader-info .info-container .basic-info>h2{
	display:inline-block;
	font-size:0.36rem;
    line-height: 0.44rem;
    height: 0.44rem;
}

.leader-info .info-container .basic-info .sex{
	color:#888;
}
.leader-info .info-container .basic-info{
	margin-top:0.02rem;
  padding-right:1rem;
  position: relative;
}
.leader-info .info-container .basic-info{
	margin-top:0.02rem;
  span.position{
      color:#AAA9A9;
      font-size:0.26rem;
  }
  span.approStat{
    color:#fff;
    display:inline-block;
    border-radius:0.1rem;
    height:0.28rem;
    line-height:0.28rem;
    font-size:0.24rem;
    width:0.96rem;
    position: absolute;
    right:-0.04rem;
    top:0.06rem;
    text-align:center;

  }
  span.beian{
     background-color:#58CF28;
  }
  span.shenpi{
    background-color:#258DE4;
  }
}
.leader-info .info-container .posi-info{
	font-size:0.32rem;
    height: 0.42rem;
    line-height: 0.42rem;
    span.days{
       font-size:0.28rem;
       color:#258DE4;
    }
    span.time{
       color:#AAA9A9;
       font-size:0.26rem;
       float:right;
    }
}
.leader-info .ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leader-info{
	padding-left:0.3rem;
	padding-top:0.14rem;
  border-bottom: 1px solid #eee;
  background-color:rgba(255,255,254,0.95);
  padding-bottom: 0.14rem; 
  margin:0.2rem auto;

}
.leader-info>div{	
	display:inline-block;
}
.leader-info .info-container{
	padding-left:0.1rem;
  max-width: 6rem;
  width: calc( 100% - 1rem);
  line-height: 0.46rem;
}

.leader-info .pic{
	vertical-align: top;
	width:0.92rem;
	height:0.92rem;
}
.leader-info .pic img{
	width:0.92rem;
	height:0.92rem;
  border-radius:50%;
  border:0.02rem solid #DCDBDC;
}



  .detail {
    margin-top: 10/50rem;

    padding-bottom: 10rem/50;

    li {
      margin-top: 10/50rem;

      background-color: #fff;
    }

    .detail-title {
      padding: 8rem/50;
      padding:8rem/50 5rem/50 8rem/50 8rem/50;

      font-weight: normal;

      overflow: hidden;

      p {
        display: inline-block;


        color: grey;

        font-size: 12px;

        margin-top: 2/50rem;
      }

      span:first-of-type {
        position: relative;

        margin-left: 16/50rem;

        &::before {
          content: '';

          width: 6/50rem;

          height: 6/50rem;

          border-radius: 50%;

          background-color: #26a2ff;

          position: absolute;

          left: -14/50rem;

          top: 50%;

          margin-top: -3/50rem;
        }
      }

      span:last-of-type {
        margin-left: 15/50rem;
      }
    }

    .detail-content {
      border-top: #f4f4f4 solid 1px;
      word-break: break-word;
      padding: 14rem/50 0 14rem/50 12rem/50;
    }
  }

  .apply {
    position: fixed;

    bottom: 0;

    left: 0;

    background: #fff;

    width: 100%;

    padding: 12/50rem 0;

    span {
      display: block;

      -webkit-tap-highlight-color: transparent;
      width: 200/50rem;

      font-size: 16px;

      margin: 0 auto;

      padding: 10rem/50 0;

      border-radius: 28rem/50;

      text-align: center;

      background-color: #007EE7;

      color: #fff;

      cursor: pointer;
    }
  }
}
</style>
